<template>
	<view class="">
		<fa-navbar title="授牌申请"></fa-navbar>
		<view class="title">
			直属会员授牌
		</view>
		<view class="awarding">
			<view class="left">
				<image src="/static/images/awarding1.jpg" mode=""></image>
			</view>
			<view class="right">
				<image src="/static/images/awarding2.jpg" mode=""></image>
			</view>
		</view>
		<view class="prompt" v-if="cost">
			直属会员授牌制作费用为：{{cost}}元，含工本费及邮费。在收到授牌制作申请2个工作日内，安排制作并邮寄。
		</view>
		<view class="line">

		</view>
		<view class="list">
			<view class="item" v-for="(v,i) in list" :key="i">
				<view class="left">
					{{v.title}}
				</view>
				<view class="right" v-if="show">
					<input type="text" :placeholder="v.placeholder" v-model="v.value" v-if="status == 1" />
					<view class="" v-if="status == 2">
						{{v.value}}
					</view>
				</view>
			</view>
		</view>
		<view class="line">

		</view>
		<view class="list" v-if="status == 2">
			<view class="item">
				<view class="left">
					支付时间
				</view>
				<view class="right">
					{{detail.pay_time}}
				</view>
			</view>

		</view>

		<view class="last" @click="last">
			返回
		</view>
		<view class="submit" @click="submit" v-if="status == 1">
			确认申请
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				show: false,
				status: '',
				cost: '',
				list: [{
						title: '收件人',
						value: '',
						placeholder: '请填写收件人姓名'
					},
					{
						title: '手机号',
						value: '',
						placeholder: '请填写收件人联系手机号码'
					},
					{
						title: '收件地址',
						value: '',
						placeholder: '请填写收件详细地址'
					},

				]
			}
		},
		onShow() {
			this.cost = this.vuex_config.member_amount
			this.getAuditing()
		},
		methods: {
			last() {
				this.$u.route('/pages/applicationForm/auditing');
			},
			async getAuditing() {
				let res = await this.$api.getAuditing();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				if (res.data.row.pay_status == 'paid') {
					this.status = 2
					this.show = true
					this.list[0].value = res.data.row.recipient
					this.list[1].value = res.data.row.receiving_phone
					this.list[2].value = res.data.row.consignee_address
					this.detail = res.data.row
				} else {
					this.status = 1
					this.show = true
					this.detail = res.data.row
				}

			},
			async submit() {
				// 判断列表中每个元素的value属性是否有值
				const hasValue = this.list.every(item => item.value);

				if (!hasValue) {
					// 如果有任何一个元素的value属性没有值，提取其对应的placeholder属性
					const missingPlaceholders = this.list.filter(item => !item.value).map(item => item.placeholder);
					// 输出没有值的placeholder

					uni.showModal({
						title: '友情提示',
						content: missingPlaceholders[0],
						showCancel: false
					})
					// 这里可以将错误信息展示给用户或者采取其他逻辑处理
					return;
				}
				const checkMobile = /^1[3456789]\d{9}$/; // 手机号正则表达式
				if (!checkMobile.test(this.list[1].value)) {
					uni.showModal({
						title: '友情提示',
						content: '手机号码格式错误',
						showCancel: false
					})
					return false
				}
				let data = {
					recipient: this.list[0].value,
					receiving_phone: this.list[1].value,
					consignee_address: this.list[2].value
				}
				const res = await this.$api.payment(data)
				console.log(res, 'res');
				//调用微信官方支付接口弹出付款界面,输入密码扣款
				wx.requestPayment({
					timeStamp: res.timeStamp, //后端返回的时间戳
					nonceStr: res.nonceStr, //后端返回的随机字符串
					package: res.package, //后端返回的prepay_id
					signType: res.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
					paySign: res.paySign, //后端返回的签名
					success(res) {
						console.log('用户支付扣款成功', res)
						uni.showModal({
							title: '友情提示',
							content: '支付成功',
							showCancel: false
						})
						this.getAuditing()
					},
					fail(res) {
						console.log('用户支付扣款失败', res)
						uni.showModal({
							title: '友情提示',
							content: '支付失败',
							showCancel: false
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		background-color: #f7f7f7;
		height: 16rpx;
	}

	.title {
		padding: 0rpx 35rpx;
		height: 87rpx;
		line-height: 87rpx;
		font-size: 31rpx;
		position: relative;
		margin-left: 20rpx;
	}

	.title::before {
		content: '';
		display: block;
		width: 10rpx;
		height: 25rpx;
		background-color: #d9001b;
		border-radius: 5rpx;
		position: absolute;
		top: 32rpx;
		left: 15rpx;
	}

	.awarding {
		display: flex;
		padding: 0rpx 35rpx;

		.left {

			image {
				width: 421rpx;
				height: 254rpx;
			}
		}

		.right {
			margin-left: 48rpx;

			image {
				width: 202rpx;
				height: 254rpx;
			}
		}
	}

	.prompt {
		padding: 35rpx;
		font-size: 26rpx;
	}

	.line {
		height: 20rpx;
		background-color: #f8f8f8;
	}

	.list {
		padding: 0rpx 35rpx;
		font-size: 31rpx;


		.item {

			padding: 35rpx 0rpx;
			border-bottom: 3rpx solid #ececec;
			display: flex;

			.left {
				width: 250rpx;
			}

			.right {
				color: #000;
				flex: 1;

				input {
					width: 100%;
				}

			}

		}


	}

	.last {
		width: 688rpx;
		height: 67rpx;
		background-color: #fff;
		border-radius: 10rpx;
		color: #d9001b;
		text-align: center;
		border: solid 1rpx #d9001b;

		line-height: 67rpx;
		font-size: 26rpx;
		margin: 0rpx auto;
	}

	.submit {
		width: 688rpx;
		height: 67rpx;
		background-color: #d9001b;
		border-radius: 10rpx;
		color: #fff;
		text-align: center;
		line-height: 67rpx;
		font-size: 26rpx;
		margin: 30rpx auto;
	}
</style>